<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/main.css}" media="all">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">
            <a href="/main" class="logo">Spring Security</a>
        </div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="javascript:;" th:text="${username}"> </a>
                <dl class="layui-nav-child">
                    <dd>
                        <form id="logoutForm" action="/logout" method="post"
                              style="display: none;">
                            <input type="hidden" th:name="${_csrf.parameterName}"
                                   th:value="${_csrf.token}">
                        </form>
                        <a
                                href="javascript:document.getElementById('logoutForm').submit();">退出系统</a>
                    </dd>
                </dl></li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo">
                <li class="layui-nav-item layui-nav-itemed"><a
                        href="javascript:;">资源下载</a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a  nav-id="001" data-url="/publicResource" onclick="active.tabAdd(this)">公共资源</a>
                        </dd>
                        <dd>
                            <a nav-id="002" data-url="/vipResource" onclick="active.tabAdd(this)">VIP资源</a>
                        </dd>
                    </dl></li>
                <li class="layui-nav-item"><a href="javascript:;">系统管理</a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="">用户管理</a>
                        </dd>
                        <dd>
                            <a href="">角色管理</a>
                        </dd>
                        <dd>
                            <a href="">权限管理</a>
                        </dd>
                        <dd>
                            <a href="">系统日志</a>
                        </dd>
                    </dl></li>
            </ul>
        </div>
    </div>
    <div class="layui-body" style="padding: 0; margin: 0; overflow: hidden;left:200px;">
        <!-- 内容主体区域 -->
        <div style="padding: 0; margin: 0; overflow: hidden;"  id="admin-body">
            <div class="layui-tab admin-nav-card layui-tab-brief" lay-filter="admin-tab"  style="margin: 0;overflow: hidden;">
                <!-- tab选项卡标题 -->
                <ul class="layui-tab-title top_tab">
                    <li class="layui-this" lay-id="-1"><i class="layui-icon"></i> 首页</li>
                </ul>
                <div id="content" class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <iframe src="/home" width="100%" height="100%" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script>
    var element;
    var active;
    //JavaScript代码区域
    layui.use(['element'], function(){
        element = layui.element;
        //触发事件
        active = {
            tabAdd: function(obj){
                var openTitle = '&nbsp;'+$(obj).html();
                openTitle += '<i class="layui-icon layui-unselect layui-tab-close" data-id="' +$(obj).attr('nav-id')+ '">&#x1006;</i>';
                //新增一个Tab项
                if($("li[lay-id='"+ $(obj).attr('nav-id')+"']").length===0){
                    element.tabAdd('admin-tab', {
                        title: openTitle,
                        content: '<iframe src="'+$(obj).attr('data-url')+'" data-id="'+$(obj).attr('nav-id')+'"  width="100%" frameborder="0" scrolling="no"></iframe>',
                        id:$(obj).attr('nav-id')
                    }).init();
                }
                element.tabChange("admin-tab",$(obj).attr('nav-id'));
                resize();
                $(".layui-tab-close").click(function(){
                    active.tabDelete($(this).attr("data-id"));
                });
            },
            /*  tabAdd:function(obj){
                   var openTitle = '&nbsp;'+$(obj).attr("title");
                    openTitle += '<i class="layui-icon layui-unselect layui-tab-close" data-id="' +$(obj).attr('nav-id')+ '">&#x1006;</i>';
                   //新增一个Tab项
                    if($("li[lay-id='"+$(obj).attr('nav-id')+"']").length==0){
                     element.tabAdd('admin-tab', {
                             title: openTitle,
                             content: '<iframe src="'+$(obj).attr('data-url')+'" data-id="'+$(obj).attr('nav-id')+'"  width="100%" frameborder="0" scrolling="no"></iframe>',
                             id:$(obj).attr('nav-id')
                     }).init();
                  }
                  element.tabChange("admin-tab",$(obj).attr('nav-id'));
                  resize();
                  $(".layui-tab-close").click(function(){
                      active.tabDelete($(this).attr("data-id"));
                  });
             }, */
            tabDelete: function(lay_id) {
                //删除指定Tab项
                element.tabDelete('admin-tab', lay_id); //删除（注意序号是从0开始计算）
            }
            ,tabChange: function(lay_id){
                //切换到指定Tab项
                element.tabChange('admin-tab', lay_id); //切换到：用户管理
            }
        };

        element.init();
        element.render('nav', 'side');
    });

    //iframe自适应
    function resize(){
        var $content = $('.admin-nav-card .layui-tab-content');
        $content.height($(this).height() - 41);
        $content.find('iframe').each(function() {
            $(this).height($content.height());
        });
    }
    $(this).on('resize', function() {
        var $content = $('.admin-nav-card .layui-tab-content');
        $content.height($(this).height() - 41);
        $content.find('iframe').each(function() {
            $(this).height($content.height());
        });
    }).resize();
</script>
</body>
</html>